<template>
  <div class="back" style="height:70%;width:100%;background-color:#FFF;padding-top: 40px;margin-top:25px;">
    <div class="page">
      <div class="inputBox">
        <div class="input">
          <label>当前密码：<i class="el-icon-lx-edit"></i></label>
          <el-input placeholder="请输入当前密码" v-model="old_password" show-password style="width:70%;font-size:18px"></el-input>
        </div>
        <div class="input">
          <label>&nbsp;&nbsp;新密码&nbsp;&nbsp;：<i class="el-icon-lx-infofill"></i></label>
          <el-input placeholder="请输入新密码" v-model="new_password" show-password style="width:70%;font-size:18px"></el-input>
        </div>
        <div class="input">
          <label>确认密码：<i class="el-icon-lx-warn"></i></label>
          <el-input placeholder="确认密码与新密码保持一致" v-model="sure" show-password style="width:70%;font-size:18px"></el-input>
        </div>
        <el-button type="primary" plain @click="changePasswd" style="width:150px;height:40px;font-size:20px;border-radius: 5px;">
          <i class="el-icon-edit"></i>
          确认修改
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { postRequest } from "@/api/index";
export default {
  name: 'Password',
  components: {},
  data() {
    return {
      old_password:'',
      new_password:'',
      sure:''
    }
  },
  methods:{
    // test(){
    //   console.log(this.test1)
    // },
    changePasswd(){
      if(this.new_password!=this.sure){
        this.$alert('新密码与确认密码不一致', '修改失败', {
          confirmButtonText: '确定',
          callback: action => {
            this.$message({
              type: 'info',
              message: `修改失败，请重新输入!`
            });
          }
        });
      }
      postRequest('/login/public/user/updatepwd', {
        newPwd: this.new_password,
        originPwd: this.old_password,
        token: this.$store.state.token,
        },
        {"Content-Type":"application/x-www-form-urlencoded"}
        ).then(res => {
          console.log('修改密码');
          console.log(res);
          if(res.code == 200) {
            this.$alert('正在跳转登陆页面', '修改成功', {
              confirmButtonText: '确定',
              callback: action => {
                this.$message({
                  type: 'info',
                  message: `修改成功，请重新登录!`
                });
                this.$router.push('/login');
              }
            });
          }else if(res.code == 402){
            this.$alert('原密码不正确，请重新输入!', '修改失败', {
              confirmButtonText: '确定',
              callback: action => {
                this.$message({
                  type: 'info',
                  message: `原密码不正确，请重新输入!`
                });
              }
            });
          }
      })
    }
  }
}
</script>

<style scoped>
  /* .el-input--small{
    height: 54px !important;
    line-height: 52px !important;
    padding-top: 30px;
    font-size: 20px;
  }
  .el-input__inner{
    height: 54px !important;
    line-height: 52px !important;
  } */
  .inputBox{
    display: flex;
    flex-direction: column;
    padding-left: 20px;
  }
  .input{
    display: flex;
    flex-direction: column;
    width:650px;
    margin-bottom: 30px;
  }
  .el-input--small {
    margin-top: 10px;
    font-size: 13px;
  }
  label{
    display: block;
    /* margin: 0em 0em 0.2857em 0em; */
    color: rgba(0,0,0,0.8);
    font-size: 1.15em;
    font-weight: bold;
    text-transform: none;
  }
  .box{
    /* margin-left: 40px; */
    font-size: 25px;
    height: 32px;
    line-height: 40px;
    padding-left: 30px;
    padding-right: 30px;
  }
</style>
